<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
	<meta charset="UTF-8">
    <title>设备日志折线图查看</title>
    <%@ include file="head.jsp" %>
    <script src="resources/lib/js/echarts.common.min.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote" style="margin-top: 20px;margin-left: 10px;">设备日志折线图查看</blockquote>
<div class="layui-tab-item layui-show" style="margin-left: 10px">
    <div>
        <form class="layui-form">
            <div class="layui-inline" id="eq_id_div">
			   
			      <select id="eq_id" name="eq_id"  lay-verify="required">
			        <option value="">选择一个id</option>
			      </select>
			</div>
			<div class="layui-inline">
			   
			      <input id="day" class="layui-input" name="day" placeholder="请选择日期" />
			</div>
            <div class="layui-inline">
                <select id="data1" name="data1" >
			        <option value="">请选择时间段</option>
			        <option value="1">最近1天</option>
			        <option value="7">最近7天</option>
			        <option value="30">最近30天</option>
			        
			     </select>
            </div>
            <button class="layui-btn" lay-submit lay-filter="search" data-type="reload">搜索</button>

        </form>
        <div  style="width: 600px;height:20px;"></div>
        <div id="eq_view" style="width: 1120px;height:420px;border:1px solid #DDDDDD"></div>
    </div>
</div>


<script>
    //JavaScript代码区域
    layui.use(['element','layer','form','table','laydate'],function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        
        
        
        /* 显示当前时间函数  */
        function show(){
        	   var mydate = new Date();
        	   
        	   var str = "" + mydate.getFullYear() + "-";
        	   str += (mydate.getMonth()+1) + "-";
        	   str += mydate.getDate() ;
        	   return str;
        }
        
        /* 日期选择的初始化 */
       laydate.render({
		    elem: '#day'
		    ,max: show()
		    ,btns: ['clear','now', 'confirm']
		});
      	/*全局变量分析图的名字  */
      	var paintName ='设备温度';
        var temp = new Array();		//折线图需要的数据
        var Xzhou = new Array();	//折线图X轴的图示
        
        
        var myChart = echarts.init(document.getElementById('eq_view'));
        var option = {
        	    title: {
        	        text: paintName,
        	    },
        	    tooltip: {
        	        trigger: 'axis'
        	    },
        	    legend: {
        	        data:['温度'/* ,'最低气温' */]
        	    },
        	    toolbox: {
        	        show: true,
        	        feature: {
        	            dataZoom: {
        	                yAxisIndex: 'none'
        	            },
        	            dataView: {readOnly: false},
        	            magicType: {type: ['line', 'bar']},
        	            restore: {},
        	            saveAsImage: {}
        	        }
        	    },
        	    xAxis:  {
        	        type: 'category',
        	        boundaryGap: false,
        	        data: Xzhou
/*         	        data: ['周一','周二','周三','周四','周五','周六','周日'] */
        	    },
        	    yAxis: {
        	        type: 'value',
        	        axisLabel: {
        	            formatter: '{value} °C'
        	        }
        	    },
        	    series: [
        	        {
        	            name:'温度',
        	            type:'line',
        	            data: temp,
        	            markPoint: {
        	                data: [
        	                    {type: 'max', name: '最大值'}
        	                    /* ,{type: 'min', name: '最小值'} */
        	                ]
        	            },
        	            markLine: {
        	                data: [
        	                    {type: 'average', name: '平均值'}
        	                ]
        	            }
        	        }
        	     
        	    ]
        	};
        myChart.setOption(option);
       	
        
        //异步加载数据函数
        var showData = function(){
        	
        	var eq_idVal = $("#eq_id").val();	//设备的ID
        	var eq_dataVal = $("#data1").val();	//需要查看的日期
        	var day1 = $("#day").val();
        	$.ajax({
        		type:"post"
        		,url: 'selectAllLog'
        		,data: {eq_id: eq_idVal,data1: eq_dataVal,limit:100}
        		,success:function(data){
        			
        			var json = JSON.parse(data);
        			for(var i = 0 ; i < json.length ; i ++ ){
        				temp[i] = json[i].eq_temp ;
        				Xzhou[i] = json[i].time ;
        			}
        			 myChart.setOption(option);
        		}
        	})
        	
        }
        var showSelect =function(){
        	/* 初始化下拉菜单 */
            $.ajax({
         	   type: "post",
         	   url : "selectEqID",
         	   success: function(data){
         		   var length = data.length;
         		   data = data.slice(1,length-1);
         		   
         		   var strs = new Array();
         		   strs = data.split(",");
         		   for( var i = 0 ; i < strs.length ; i++ ){
         			   if(i == 0){
         				   
         			   		var sc = $("<option selected></option>") ;
         			   }else{
         				   
         			   		var sc = $("<option></option>") ;
         			   }
         			   sc.attr("value",strs[i]);
         			   sc.text(strs[i]);
         			   $("#eq_id").append(sc);
         		   }
         		 form.render("select");
         		var eq_idVal = $("#eq_id").val();	//设备的ID
         		
         		showData();
         	   }
            })
        }
        //初始化数据图
        showSelect();
        
        
        
        //form表单提交的监听
        form.on('submit(search)',function(data){
        	var eq_idVal = data.field.eq_id;	//设备的ID
        	var eq_dataVal = data.field.data1;	//需要查看的日期
        	var day1 = data.field.day;
        	$.ajax({
        		type:"post"
        		,url: 'selectAllLog'
        		,data: {eq_id: eq_idVal,data1: eq_dataVal,limit:100,day:day1}
        		,success:function(data){
        			layer.msg(data);
        			if(data =="[]" ){
        				layer.msg("无数据！");
        				temp.splice(0,temp.length);
        				Xzhou.splice(0,Xzhou.length);
        				
        			}  
        			var json = JSON.parse(data);
        			for(var i = 0 ; i < json.length ; i ++ ){
        				temp[i] = json[i].eq_temp ;
        				Xzhou[i] = json[i].time ;
        			}
        			 myChart.setOption(option);
        		}
        	})
        	
            return false;
        });

    });
</script>
</body>
</html>